<template>
  <el-form>
    <el-row>
      <el-row class="borderCss">
        <div id="testBar" style="height: 300px" class="marginInfo"></div>
      </el-row>
      <el-row class="borderCss" style="margin-top: 10px">
        <div id="intervene" style="height: 300px" class="marginInfo"></div>
      </el-row>
      <el-row class="borderCss" style="margin-top: 10px">
        <div id="grade" style="height: 300px" class="marginInfo"></div>
      </el-row>
    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "thirdRegister",
  props: ["schoolDataObj"],
  data() {
    return {
      hearderTitle: {
        completeTestNum: 0,
        noCompleteTestNum: 0,
        allTestNum: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {},
  mounted() {
    let obj = this.schoolDataObj;
    let testBarXAxisData = [
      "发布测评人数",
      "已完成测评人数",
      "未完成测评人数",
      // "未参与测评人数",
      // "未完成测评人数",
    ];
    let testBarSeriesData = [
      obj.findReleaseFinishTestNum.length
        ? obj.findReleaseFinishTestNum[0].num
        : 0,
      obj.findFinishTestNum.length ? obj.findFinishTestNum[0].num : 0,
      obj.findNoReleaseFinishTestNum.length
        ? obj.findNoReleaseFinishTestNum[0].num
        : 0,
      obj.findFinishNoTestNum.length ? obj.findFinishNoTestNum[0].num : 0,
    ];
    let colorList = ["#097ca8", "#00FF00", "#f0f024", "#FFA07A"];

    this.finishInitChartInfo(
      "testBar",
      "测评完成概况",
      testBarXAxisData,
      testBarSeriesData,
      colorList
    );

    let interveneXAxisData = ["预警总人数", "已干预人数", "未干预人数"];
    let interveneColorList = ["#0984b1", "#BBFF66", "#DDAA00"];
    let num = 0;
    let noNum = 0;
    let allNum = 0;

    let numList = [];
    let noNumList = [];
    let totalList = [];
    let gradeyAxisData = [];
    obj.findGradeLevelInterveneNum.map((item) => {
      if (!item) {
        return;
      }

      let itemNum = item.num < 0 ? 0 : item.num * 1;
      let itemNoNum = item.noNum < 0 ? 0 : item.noNum * 1;
      num += itemNum;
      noNum += itemNoNum;
      allNum += itemNum + itemNoNum * 1;
      gradeyAxisData.push(item.name);

      numList.push({ value: itemNum, interveneFlag: "Y" });
      noNumList.push({ value: itemNoNum, interveneFlag: "N" });
      totalList.push(itemNum + itemNoNum);
    });
    let interveneSeriesData = [allNum, num, noNum];
    this.initChartInfo(
      "intervene",
      "预警干预概况",
      interveneXAxisData,
      interveneSeriesData,
      interveneColorList
    );

    this.initPileUpChart(
      "grade",
      "各年级预警干预情况",
      gradeyAxisData,
      numList,
      noNumList,
      totalList
    );
  },
  methods: {
    finishInitChartInfo(id, title, xAxisData, seriesData, colorList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        grid: {
          top: 80,
          bottom: "25%",
          height: 150,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            interval: 0,
            rotate: 40,
            show: true,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 10, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                color: function (params) {
                  if (colorList && colorList.length) {
                    return colorList[params.dataIndex];
                  }
                  return "#7744FF";
                },
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        let newParams = {
          projectId: this.schoolDataObj.projectId,
          tenantId: this.schoolDataObj.tenantId,
        };
        if (
          params.name == "未参与测评人数" ||
          params.name == "未完成测评人数"
        ) {
          newParams.todoType = "undone";
          this.$router.push({
            path: "/desk/todo",
            query: newParams,
          });
        } else {
          this.$router.push({
            name: "年级详情列表",
            query: newParams,
          });
        }
      });
    },
    initChartInfo(id, title, xAxisData, seriesData, colorList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        grid: {
          top: 80,
          bottom: "15%",
          height: 180,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 10, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: [5, 5, 0, 0],
                color: function (params) {
                  if (colorList && colorList.length) {
                    return colorList[params.dataIndex];
                  }
                  return "#7744FF";
                },
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        if (params.name === "学生总人数") {
          return false;
        }
        if (params.name == "未测人数") {
          this.$router.push({
            path: "/desk/todo",
            todoType: "undone",
          });
        } else {
          let newParams = {
            projectId: this.schoolDataObj.projectId,
            tenantId: this.schoolDataObj.tenantId,
          };
          if (params.name == "已干预人数") {
            newParams.interveneFlag = "Y";
          } else if (params.name == "未干预人数") {
            newParams.interveneFlag = "N";
          } else if (params.name === "预警总人数") {
            newParams.level = "1,2,3,4,5";
          }
          this.$router.push({
            name: "年级详情列表",
            query: newParams,
          });
        }
      });
    },
    initPileUpChart(id, title, yAxisData, numList, noNumList) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: title,
          textStyle: {
            color: "#0986b3",
          },
        },
        grid: {
          top: 80,
          bottom: "15%",
          height: 180,
        },
        xAxis: {
          type: "category",
          data: yAxisData,
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 40,
            textStyle: {
              color: "white",
            },
          },
        },
        yAxis: {
          name: "单位：人",
          nameTextStyle: {
            padding: [0, 0, 10, -15], // 四个数字分别为上右下左与原位置距离
            color: "white",
          },
          nameLocation: "end",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
            },
          },
        },
        series: [
          {
            data: noNumList,
            type: "bar",
            barMaxWidth: 20,
            stack: "total",
            itemStyle: {
              normal: {
                color: "#DDAA00",
                label: {
                  show: true, //开启显示
                  position: "inside", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
          {
            data: numList,
            type: "bar",
            stack: "total",
            barMaxWidth: 20,
            itemStyle: {
              normal: {
                color: "#BBFF66",
                borderRadius: [5, 5, 0, 0],
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "white",
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      myChart.on("click", (params) => {
        // 在用户点击后控制台打印数据的名称
        let newParams = {
          projectId: this.schoolDataObj.projectId,
          tenantId: this.schoolDataObj.tenantId,
          interveneFlag: params.data.interveneFlag,
          gradeName: params.name,
        };
        this.$router.push({
          name: "年级详情列表",
          query: newParams,
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
